<template>
    <div>
        <div style="margin: 10px 0;">
            <el-input style="width: 200px;" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
            <el-button style="margin-left: 5px;" type="primary">搜索</el-button>
        </div>

        <div style="margin: 10px 0;">
            <el-button type="primary">新增<i class="el-icon-circle-plus-outline"></i></el-button>
            <el-button type="danger">批量删除<i class="el-icon-remove-outline"></i></el-button>
            <!-- <el-button type="primary">导入<i class="el-icon-bottom"></i></el-button>
            <el-button type="primary">导出<i class="el-icon-top"></i></el-button> -->
        </div>

        <el-table :data="tableData" border stripe :header-cell-class-name="headerBg">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column label="操作">
                <el-button type="success">编辑<i class="el-icon-edit"></i></el-button>
                <el-button type="danger">删除<i class="el-icon-remove-outline"></i></el-button>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0;">
            <el-pagination
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'User',
    data() {
        const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        };
        return {
            tableData: Array(10).fill(item),
            headerBg: 'headerBg'
        }
    }

}
</script>

<style>
.headerBg {
    background-color: #eee !important;
}
</style>